import Vue from "../index.js"
import { Watcher } from "../Watcher.js"

/**
 * 挂载
 * @param {*} vm 实例
 */
export function mountComponent(vm) {
  // 更新组件的函数
  const undateComponent = () => {
    vm._update(vm._render())
  }
  // 实例化一个渲染Watcher， 当响应式数据更新时，这个函数会被执行
  new Watcher(undateComponent)
}

/**
 * 负责执行 vm.$options.render 函数
 * @returns 
 */
Vue.prototype._render = function() {
  return this.$options.render.apply(this)
}
/**
 * 节点更新
 * @param {*} vnode 
 */
Vue.prototype._update = function(vnode) {
  // 旧节点
  const prevVNode = this._vnode
  // 新节点
  this._vnode = vnode
  if(!prevVNode) {
    // 如果不存在旧节点，说明是首次渲染根节点
    this.$el = this.__patch__(this.$el, vnode)
  } else {
    // 后续更新组件或者子组件的首次渲染，都走这里
    // 进行节点比对（diff）
    this.$el = this.__patch__(prevVNode, vnode)
  }
}